<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>布局技巧</title>
    <style>
      /* * {
        margin: 0;
        padding: 0;
      } */
      /* margin的负值巧妙运用  */
      ul li {
        position: relative;

        float: left;
        list-style: none;
        width: 150px;
        height: 200px;
        border: 1px solid red;
        margin-left: -1px;
      }

      /* ul li:hover {
        //1.如果盒子没有定位，则鼠标经过添加相对定位即可 
        position: relative;
        border: 1px solid blue;
      } 
      */

      ul li:hover {
        /* 2.如果li都有定位，则利用 z-index 提高层级 */
        z-index: 1;
        border: 1px solid blue;
      }

      /* 文字环绕浮动元素的妙用 */

      .box {
        width: 300px;
        height: 70px;
        background-color: pink;
        margin: 0 auto;
      }
      .pic {
        float: left;
        width: 150px;
        height: 65px;
        margin-right: 5px;
        padding: 5px;
      }

      .pic img {
        width: 100%;
      }

      /* 行内块的巧妙运用 */
      .box2 {
        text-align: center;
      }

      .box2 a {
        display: inline-block;
        width: 36px;
        height: 36px;
        background-color: #f7f7f7;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 36px;
        text-decoration: none;
        color: #333;
        font-size: 14px;
      }

      .box2 .prev,
      .box2 .next {
        width: 85px;
      }

      .box2 .current,
      .box2 .elp {
        background-color: #fff;
        border: none;
      }

      .box2 input {
        width: 45px;
        height: 36px;
        border: 1px solid #ccc;
        outline: none;
      }

      .box2 button {
        width: 60px;
        height: 36px;
        font-size: 14px;
        background-color: #f7f7f7;
        border: 1px solid #ccc;
      }

      /* CSS三角巧妙运用 */
      .box3 {
        width: 0;
        height: 0;
        /* 上边框宽度调大 */
        /* border-top: 100px solid transparent;
        border-right: 50px solid red; */
        /* 左边和下边的边框宽度设置为0 */
        /* border-left: 0 solid #000;
        border-bottom: 0 solid green; */

        /* 1.只保留右边的边框有颜色 */
        border-color: transparent red transparent transparent;
        /* 2.样式都是 solid*/
        border-style: solid;
        /* 3.上边框宽度要大，右边框宽度稍小，其余的边框宽度为0 */
        border-width: 100px 50px 0 0;
      }

      .price {
        width: 160px;
        height: 24px;
        line-height: 24px;
        border: 1px solid red;
        margin: 0 auto;
      }

      .miaosha {
        position: relative;
        float: left;
        width: 90px;
        height: 101%;
        background-color: blue;
        text-align: center;
        color: #fff;
        font-size: 700;
        margin-right: 8px;
      }

      .miaosha i {
        position: absolute;
        right: 0;
        top: 0;
        width: 0;
        height: 0;
        /* border-color: transparent blue transparent transparent; */
        border-color: transparent #fff transparent transparent;
        border-style: solid;
        border-width: 24.5px 10px 0 0;
      }

      .origin {
        font-size: 12px;
        color: gray;
        text-decoration: line-through;
      }
    </style>
  </head>
  <body>
    <!-- margin的负值巧妙运用 -->
    <!-- <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul> -->

    <!-- 文字环绕浮动元素的妙用 -->
    <!-- <div class="box">
      <div class="pic">
        <img
          src="../image/image1.03.webp"
          alt=""
          style="width: 150px; height: 60px"
        />
      </div>
      <p>你好啊哈，你好啊哈，你好啊哈，你好啊哈</p>
    </div> -->

    <!-- 行内块的巧妙运用 -->
    <!-- <div class="box2">
      <a href="#" class="prev">&lt;&lt;上一页</a>
      <a href="#" class="current">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
      <a href="#">6</a>
      <a href="#" class="elp">...</a>
      <a href="#" class="next">下一页&gt;&gt;</a>
      到第
      <input type="text" />
      页
      <button>确定</button>
    </div> -->

    <!-- CSS三角巧妙运用 -->
    <!-- <div class="box3"></div> -->

    <div class="price">
      <span class="miaosha">
        &yen;1650
        <i></i>
      </span>
      <span class="origin">&yen;5650</span>
    </div>
  </body>
</html>
